<template>
  <div class="item-one">
    <div class="Box">
        <!-- 商戶基本信息 -->
      <div class="one" v-show="ones">
        <div class="title">
          <span>商戶基本信息</span>
          <div>
            <el-button icon="el-icon-refresh"></el-button>
          </div>
        </div>
        <div class="basicBox">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="160px" class="demo-ruleForm">
                <el-form-item v-if="userinfo.rolesId !=2 && userinfo.rolesId !=3 && userinfo.rolesId !=4" label="一级服务商:" prop="agent1Id">
                    <el-autocomplete
                        class="service"
                        v-model.trim="ruleForm.agent1"
                        :fetch-suggestions="querySearch"
                        placeholder="请选择一级服务商"
                        @select="serviceid"
                    ></el-autocomplete>
                </el-form-item>
                <el-form-item v-if="userinfo.rolesId !=3 && userinfo.rolesId !=4" label="二级服务商:" prop="agent2Id">
                    <el-autocomplete
                        class="service"
                        v-model.trim="ruleForm.agent2"
                        :fetch-suggestions="querySearch2"
                        placeholder="请选择二级服务商"
                        @select="serviceid2"
                    ></el-autocomplete>
                </el-form-item>
                <el-form-item v-if="userinfo.rolesId !=4" label="业态" prop="bdId">
                    <!-- <el-input placeholder="业态" v-model="ruleForm.bdId"></el-input> -->
                    <el-autocomplete
                        class="service"
                        v-model.trim="ruleForm.BDname"
                        :fetch-suggestions="BDname"
                        placeholder="业态"
                        @select="BDid"
                    ></el-autocomplete>
                </el-form-item>
                <el-form-item label="商户名称" prop="merchantName"><el-input placeholder="商户名称" v-model.trim="ruleForm.merchantName"></el-input></el-form-item>
                <el-form-item label="商户简称" prop="merchantShortName"><el-input placeholder="商户简称" v-model.trim="ruleForm.merchantShortName"></el-input></el-form-item>
                <el-form-item label="注册名称" prop="merchantBusinessName"><el-input placeholder="注册名称" v-model.trim="ruleForm.merchantBusinessName"></el-input></el-form-item>
                <el-form-item label="商户联系人" prop="contactName"><el-input placeholder="商户联系人" v-model.trim="ruleForm.contactName"></el-input></el-form-item>
                <el-form-item label="负责人电话" prop="contactPhone"><el-input placeholder="负责人电话" v-model.trim="ruleForm.contactPhone"></el-input></el-form-item>
                <el-form-item label="负责人邮箱" prop="contactEmail"><el-input placeholder="负责人邮箱" v-model.trim="ruleForm.contactEmail"></el-input></el-form-item>
                <el-form-item label="所属行业" prop="industry1">
                    <!-- <el-select class="width100"  v-model="ruleForm.industry1" placeholder="所属行业">
                        <el-option keys="3" label="服务业" value="0"></el-option>
                        <el-option keys="4" label="餐营业" value="98"></el-option>
                    </el-select> -->
                    <el-select class="service" v-model="ruleForm.merchantMcc1Names" placeholder="所属行业" @change="wx2fun">
                        <el-option
                        v-for="(value, index) in wx1arr"
                        :key="index"
                        :label="value.firstname"
                        :value="value.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item prop="industry2">
                    <el-select class="width100" v-model="ruleForm.merchantMcc2Names" placeholder="细分行业" @change="wx3fun">
                        <el-option
                        v-for="(value, index) in wx2arr"
                        :key="index"
                        :value="value.id"
                        :label="value.secondname"
                        ></el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item prop="industry3">
                     <el-select class="width100" v-model="ruleForm.industry3" placeholder="三级行业" @change="wx4fun">
                        <el-option
                        v-for="(value, index) in wx3arr"
                        :key="index"
                        :value="value.id"
                        :label="value.thirdname"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="客服电话(必须手机号)" prop="servicePhone"><el-input placeholder="客服电话" v-model.trim="ruleForm.servicePhone"></el-input></el-form-item>
                <el-form-item label="所在省" prop="province">
                    <el-select class="width100" v-model="ruleForm.province" placeholder="所在省" @change="city">
                        <el-option
                        v-for="(item, index) in provincearr"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                        :codeid="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在市" prop="city">
                    <el-select class="width100" v-model="ruleForm.city" placeholder="所在市" @change='county'>
                        <el-option
                        v-for="(value, index) in cityarr"
                        :key="index"
                        :label="value.name"
                        :value="value.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在区" prop="county">
                    <!-- <el-select class="width100" v-model="ruleForm.county" placeholder="所在区">
                        <el-option keys="3" label="服务业" value="0"></el-option>
                        <el-option keys="4" label="餐营业" value="98"></el-option>
                    </el-select> -->
                    <el-select class="width100" v-model="ruleForm.county" placeholder="所在区" @change='countyCode'>
                        <el-option
                        v-for="(value, index) in countyarr"
                        :key="index"
                        :label="value.name"
                        :value="value.code"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商户详细地址" prop="merchantAddress"><el-input placeholder="商户详细地址" v-model.trim="ruleForm.merchantAddress"></el-input></el-form-item>
                <el-form-item><el-button type="primary" @click="basic('ruleForm')">下一步</el-button></el-form-item>
            </el-form>
        </div>
      </div>


        <!-- 商戶结算信息 -->
      <div class="two" v-show="twos">
        <div class="title">
          <span>商戶结算信息</span>
          <div>
            
          </div>
        </div>
         <div class="basicBox">
            <el-form :model="settlement" status-icon :rules="settlements" ref="settlement" label-width="160px" class="demo-ruleForm">
                <el-form-item label="入网商户类型" prop="merchant_type">
                    <el-select class="width100"  v-model="settlement.merchantType" placeholder="入网商户类型" @change='merchantsType'>
                        <el-option keys="3" label="企业" value="1"></el-option>
                        <el-option keys="3" label="个体工商户" value="2"></el-option>
                        <el-option keys="4" label="小微企业" value="3"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <!-- 企业 -->
            <el-form v-show="settlement.merchantType == 1 || settlement.merchantType == 2" :model="settlement" status-icon :rules="settlements" ref="settlement" label-width="160px" class="demo-ruleForm">
                <el-form-item label="营业执照号" prop="businessLicence"><el-input placeholder="营业执照号" v-model.trim="settlement.businessLicence" autocomplete="off"></el-input></el-form-item>
                <el-form-item label="执照有效期" prop="businessLicenceExpire">
                    <div class="block">
                        <el-date-picker
                        v-model="settlement.businessLicenceExpire"
                        type="date"
                         value-format="yyyyMMdd"
                        placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-form-item>                
                <el-form-item label="结算账户类型" prop="accountType">
                    <el-select class="width100"  v-model="settlement.accountType" placeholder="结算账户类型">
                        <el-option keys="3" label="对公" value="1"></el-option>
                        <el-option keys="4" label="对私" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="入网证件类型" prop="licenceType">
                    <el-select class="width100" :disabled="geti"  v-model="settlement.licenceType" placeholder="结算账户类型" @change='licenceType'>
                        <el-option keys="3" label="三合一营业执照" :value="1"></el-option>
                        <el-option keys="4" label="营业执照" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item v-if="settlement.accountType == 2" label="结算入账类型" prop="settlementType">
                    <el-select class="width100"  v-model="settlement.settlementType" placeholder="结算入账类型">
                        <el-option keys="3" label="法人结算" value="1"></el-option>
                        <el-option keys="4" label="非法人结算" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="settlement.settlementType == 2" label="法人名称" prop="legalName"><el-input placeholder="法人名称" v-model.trim="settlement.legalName"></el-input></el-form-item>
                <el-form-item v-if="settlement.settlementType == 2" label="法人身份证号" prop="legalCertNo"><el-input placeholder="法人身份证号" v-model.trim="settlement.legalCertNo"></el-input></el-form-item>
                <el-form-item v-if="settlement.settlementType == 2" label="法人身份证有效期" prop="legaCertExpire">
                    <div class="block">
                        <el-date-picker
                        v-model="settlement.legaCertExpire"
                        type="date"
                         value-format="yyyyMMdd"
                        placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-form-item>    

                <el-form-item label="结算人证件号码" prop="principalCertNo"><el-input placeholder="结算人证件号码" v-model.trim="settlement.principalCertNo"></el-input></el-form-item>
                <el-form-item label="结算人身份证有效期" prop="principalCertExpire">
                    <div class="block">
                        <el-date-picker
                        v-model="settlement.principalCertExpire"
                        type="date"
                        value-format="yyyyMMdd"
                        placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="结算账户开户名" prop="accountCardName"><el-input placeholder="结算账户开户名" v-model.trim="settlement.accountCardName"></el-input></el-form-item>
                <el-form-item label="结算账户开户号" prop="accountCardNum"><el-input placeholder="结算账户开户号" v-model.trim="settlement.accountCardNum"></el-input></el-form-item>
                <el-form-item label="银行预留手机号" prop="accountPhone"><el-input placeholder="银行预留手机号" v-model.trim="settlement.accountPhone"></el-input></el-form-item>
                <el-form-item label="开户行" prop="bank1">
                     <el-select class="width100" v-model="settlement.parentBankNo" placeholder="开户行" @change="parent">
                        <el-option
                        v-for="(item, index) in parentlists"
                        :key="index"
                        :label="item.parentBankName"
                        :value="item.id"
                        :codeid="item.parentBankNo"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="结算户支行地址" prop="province">
                    <el-select class="width100" v-model="settlement.province" placeholder="所在省" @change="citys">
                        <el-option
                        v-for="(item, index) in provincearr"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                        :codeid="item.code"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在市" prop="city">
                    <el-select class="width100" v-model="settlement.city" placeholder="所在市" @change='countys'>
                        <el-option
                        v-for="(value, index) in citysarr"
                        :key="index"
                        :label="value.name"
                        :value="value.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                  <el-form-item label="结算户开户支行" prop="accountBankName">
                     <!-- <el-select class="width100" v-model="settlement.accountbank" placeholder="结算户开户支行" @change='accountBank'>
                        <el-option
                        v-for="(value, index) in bankarr"
                        :key="index"
                        :label="value.bankName"
                        :value="value.unionBankNo"
                        ></el-option>
                    </el-select> -->
                     <el-autocomplete
                        class="service"
                        v-model.trim="settlement.accountBankName"
                        :fetch-suggestions="querySearch3"
                        placeholder="结算户开户支行"
                        @select="serviceid3"
                    ></el-autocomplete>
                </el-form-item>
                
                <el-form-item><el-button type="primary" @click="two('settlement')">下一步</el-button><el-button type="primary" @click="goone()">上一步</el-button></el-form-item>
            </el-form>



            <!-- 小微商户 -->
            <el-form v-show="settlement.merchantType == 3" :model="settlement1" status-icon :rules="settlements1" ref="settlement1" label-width="160px" class="demo-ruleForm">            
                <el-form-item label="结算账户类型" prop="accountType">
                    <el-select class="width100"  v-model="settlement1.accountType" placeholder="结算账户类型" disabled>
                        <el-option keys="3" label="对公" :value='1'></el-option>
                        <el-option keys="4" label="对私" :value='2'></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="结算人证件号码" prop="principalCertNo"><el-input placeholder="结算人证件号码" v-model.trim="settlement1.principalCertNo"></el-input></el-form-item>
                <el-form-item label="结算人身份证有效期" prop="principalCertExpire">
                    <div class="block">
                        <el-date-picker
                        v-model="settlement1.principalCertExpire"
                        type="date"
                        value-format="yyyyMMdd"
                        placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="结算账户开户名" prop="accountCardName"><el-input placeholder="结算账户开户名" v-model.trim="settlement1.accountCardName"></el-input></el-form-item>
                <el-form-item label="结算账户开户号" prop="accountCardNum"><el-input placeholder="结算账户开户号" v-model.trim="settlement1.accountCardNum"></el-input></el-form-item>
                <el-form-item label="银行预留手机号" prop="accountPhone"><el-input placeholder="银行预留手机号" v-model.trim="settlement1.accountPhone"></el-input></el-form-item>
                <el-form-item label="开户行" prop="parentBankNo">
                     <el-select class="width100" v-model="settlement1.parentBankNo" placeholder="开户行" @change="parent">
                        <el-option
                        v-for="(item, index) in parentlists"
                        :key="index"
                        :label="item.parentBankName"
                        :value="item.id"
                        :codeid="item.parentBankNo"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="结算户支行地址" prop="province">
                    <el-select class="width100" v-model="settlement1.province" placeholder="所在省" @change="citys">
                        <el-option
                        v-for="(item, index) in provincearr"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                        :codeid="item.code"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在市" prop="city">
                    <el-select class="width100" v-model="settlement1.city" placeholder="所在市" @change='countys'>
                        <el-option
                        v-for="(value, index) in citysarr"
                        :key="index"
                        :label="value.name"
                        :value="value.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                  <el-form-item label="结算户开户支行" prop="accountBankName">
                     <!-- <el-select class="width100" v-model="settlement1.accountbank" placeholder="结算户开户支行" @change='accountBank'>
                        <el-option
                        v-for="(value, index) in bankarr"
                        :key="index"
                        :label="value.bankName"
                        :value="value.unionBankNo"
                        ></el-option>
                    </el-select> -->
                     <el-autocomplete
                        class="service"
                        v-model.trim="settlement1.accountBankName"
                        :fetch-suggestions="querySearch3"
                        placeholder="结算户开户支行"
                        @select="serviceid3"
                    ></el-autocomplete>
                </el-form-item>
                <el-form-item><el-button type="primary" @click="two('settlement1')">下一步</el-button><el-button type="primary" @click="goone()">上一步</el-button></el-form-item>
            </el-form>
        </div>
      </div>



    <!-- 商戶费率及证照 -->
      <div class="three" v-show="threes">
        <div class="title">
            <span>商戶费率及证照</span>
        </div>
        <div class="basicBoxs">
            <!-- 手续费 -->
            <el-form :model="picture" status-icon ref="pictures" label-width="110px" class="demo-dynamic">
                <el-form-item label="商户手续费" prop="rateCode">
                    <el-select class="width100"  v-model="picture.rateCode" placeholder="商户手续费">
                        <el-option v-for="(item,index) in ratelists" :key="index" keys="3" :label="item.rate/10+ '‰'" :value="item.rateCode"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <!-- 小微商户 -->
            <el-form v-if="settlement.merchantType == 3" :model="picture" status-icon ref="pictures" label-width="110px" class="demo-dynamic">
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pBankcardA"
                    >   
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pBankcardA"
                        :src="picture.pBankcardA"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>银行卡正面</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pBankcardB"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pBankcardB"
                        :src="picture.pBankcardB"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>银行卡反面</div>
                </el-form-item>
                 <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pIdcardA"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pIdcardA"
                        :src="picture.pIdcardA"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>身份证正面</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pIdcardB"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pIdcardB"
                        :src="picture.pIdcardB"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>身份证反面</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pOutside"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pOutside"
                        :src="picture.pOutside"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>外部门头照</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pInside"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pInside"
                        :src="picture.pInside"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>内部环境照</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pIdcardHander"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pIdcardHander"
                        :src="picture.pIdcardHander"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>手持身份证照</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pBankIdcardA"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pBankIdcardA"
                        :src="picture.pBankIdcardA"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>对私结算人身份证正面照</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pBankIdcardB"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pBankIdcardB"
                        :src="picture.pBankIdcardB"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>对私结算人身份证反面照</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pOther"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pOther"
                        :src="picture.pOther"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>其他照片</div>
                </el-form-item>
            </el-form>
            <!-- 企业对公 -->
             <el-form v-else-if="settlement.merchantType != 3 && settlement.accountType == 1" :model="picture" status-icon ref="pictures" label-width="110px" class="demo-dynamic">
                <el-form-item class="photo">
                        <el-upload
                            list-type="picture-card"
                            :action="upload"
                            :headers="token"
                            :show-file-list="false"
                            :on-success="pLicense"
                        >
                            <img
                            style="width:100%;height:100%"
                            v-if="picture.pLicense"
                            :src="picture.pLicense"
                            class="avatar"
                            >
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        <div>营业执照</div>
                    </el-form-item>
                     <el-form-item class="photo">
                        <el-upload
                            list-type="picture-card"
                            :action="upload"
                            :headers="token"
                            :show-file-list="false"
                            :on-success="pIdcardA"
                        >
                            <img
                            style="width:100%;height:100%"
                            v-if="picture.pIdcardA"
                            :src="picture.pIdcardA"
                            class="avatar"
                            >
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        <div>身份证正面</div>
                    </el-form-item>
                    <el-form-item class="photo">
                        <el-upload
                            list-type="picture-card"
                            :action="upload"
                            :headers="token"
                            :show-file-list="false"
                            :on-success="pIdcardB"
                        >
                            <img
                            style="width:100%;height:100%"
                            v-if="picture.pIdcardB"
                            :src="picture.pIdcardB"
                            class="avatar"
                            >
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        <div>身份证反面</div>
                    </el-form-item>
                    <el-form-item class="photo">
                        <el-upload
                            list-type="picture-card"
                            :action="upload"
                            :headers="token"
                            :show-file-list="false"
                            :on-success="pOutside"
                        >
                            <img
                            style="width:100%;height:100%"
                            v-if="picture.pOutside"
                            :src="picture.pOutside"
                            class="avatar"
                            >
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        <div>外部门头照</div>
                    </el-form-item>
                    <el-form-item class="photo">
                        <el-upload
                            list-type="picture-card"
                            :action="upload"
                            :headers="token"
                            :show-file-list="false"
                            :on-success="pInside"
                        >
                            <img
                            style="width:100%;height:100%"
                            v-if="picture.pInside"
                            :src="picture.pInside"
                            class="avatar"
                            >
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        <div>内部环境照</div>
                    </el-form-item>
                    <el-form-item class="photo">
                        <el-upload
                            list-type="picture-card"
                            :action="upload"
                            :headers="token"
                            :show-file-list="false"
                            :on-success="pOpenAccount"
                        >
                            <img
                            style="width:100%;height:100%"
                            v-if="picture.pOpenAccount"
                            :src="picture.pOpenAccount"
                            class="avatar"
                            >
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        <div>开户许可证</div>
                    </el-form-item>
                      <!-- 非3合一证件 -->
                    <el-form-item v-if="settlement.licenceType == 0" class="photo">
                        <el-upload
                            list-type="picture-card"
                            :action="upload"
                            :headers="token"
                            :show-file-list="false"
                            :on-success="pOrganization"
                        >
                            <img
                            style="width:100%;height:100%"
                            v-if="picture.pOrganization"
                            :src="picture.pOrganization"
                            class="avatar"
                            >
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        <div>组织机构代码</div>
                    </el-form-item>
                    <el-form-item v-if="settlement.licenceType == 0" class="photo">
                        <el-upload
                            list-type="picture-card"
                            :action="upload"
                            :headers="token"
                            :show-file-list="false"
                            :on-success="pTaxRegistration"
                        >
                            <img
                            style="width:100%;height:100%"
                            v-if="picture.pTaxRegistration"
                            :src="picture.pTaxRegistration"
                            class="avatar"
                            >
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        <div>税务登记证</div>
                    </el-form-item>
                    <el-form-item class="photo">
                        <el-upload
                            list-type="picture-card"
                            :action="upload"
                            :headers="token"
                            :show-file-list="false"
                            :on-success="pOther"
                        >
                            <img
                            style="width:100%;height:100%"
                            v-if="picture.pOther"
                            :src="picture.pOther"
                            class="avatar"
                            >
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        <div>其他照片</div>
                    </el-form-item>
            </el-form>
            <!-- 企业对私法人结算 -->
             <el-form v-else-if="settlement.merchantType != 3 && settlement.accountType == 2 && settlement.settlementType == 1"  :model="picture" status-icon ref="pictures" label-width="110px" class="demo-dynamic">
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pLicense"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pLicense"
                        :src="picture.pLicense"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>营业执照</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pBankIdcardA"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pBankIdcardA"
                        :src="picture.pBankIdcardA"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>对私结算人身份证正面照</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pBankIdcardB"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pBankIdcardB"
                        :src="picture.pBankIdcardB"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>对私结算人身份证反面照</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pBankcardA"
                    >   
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pBankcardA"
                        :src="picture.pBankcardA"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>银行卡正面</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pBankcardB"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pBankcardB"
                        :src="picture.pBankcardB"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>银行卡反面</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pOutside"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pOutside"
                        :src="picture.pOutside"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>外部门头照</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pInside"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pInside"
                        :src="picture.pInside"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>内部环境照</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pOpenAccount"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pOpenAccount"
                        :src="picture.pOpenAccount"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>开户许可证</div>
                </el-form-item>

                 <!-- 非3合一证件 -->
                <el-form-item v-if="settlement.licenceType == 0" class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pOrganization"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pOrganization"
                        :src="picture.pOrganization"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>组织机构代码</div>
                </el-form-item>
                <el-form-item v-if="settlement.licenceType == 0" class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pTaxRegistration"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pTaxRegistration"
                        :src="picture.pTaxRegistration"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>税务登记证</div>
                </el-form-item>

                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pOther"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pOther"
                        :src="picture.pOther"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>其他照片</div>
                </el-form-item>
            </el-form>
            <!-- 企业对私非法人 -->
             <el-form v-else-if="settlement.merchantType != 3 && settlement.accountType == 2 && settlement.settlementType == 2" :model="picture" status-icon ref="pictures" label-width="110px" class="demo-dynamic">
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pLicense"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pLicense"
                        :src="picture.pLicense"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>营业执照</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pBankIdcardA"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pBankIdcardA"
                        :src="picture.pBankIdcardA"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>对私结算人身份证正面照</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pBankIdcardB"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pBankIdcardB"
                        :src="picture.pBankIdcardB"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>对私结算人身份证反面照</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pIdcardA"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pIdcardA"
                        :src="picture.pIdcardA"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>身份证正面</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pIdcardB"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pIdcardB"
                        :src="picture.pIdcardB"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>身份证反面</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pBankcardA"
                    >   
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pBankcardA"
                        :src="picture.pBankcardA"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>银行卡正面</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pBankcardB"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pBankcardB"
                        :src="picture.pBankcardB"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>银行卡反面</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pOutside"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pOutside"
                        :src="picture.pOutside"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>外部门头照</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pInside"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pInside"
                        :src="picture.pInside"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>内部环境照</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pOpenAccount"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pOpenAccount"
                        :src="picture.pOpenAccount"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>开户许可证</div>
                </el-form-item>
                
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pUnincorporated"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pUnincorporated"
                        :src="picture.pUnincorporated"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>入账非法人证明</div>
                </el-form-item>

                <!-- 非3合一证件 -->
                <el-form-item v-if="settlement.licenceType == 0" class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pOrganization"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pOrganization"
                        :src="picture.pOrganization"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>组织机构代码</div>
                </el-form-item>
                <el-form-item v-if="settlement.licenceType == 0" class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pTaxRegistration"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pTaxRegistration"
                        :src="picture.pTaxRegistration"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>税务登记证</div>
                </el-form-item>
                

                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pOther"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pOther"
                        :src="picture.pOther"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>其他照片</div>
                </el-form-item>
            </el-form>
        </div>
        <div class="btnBox">
            <el-button type="primary" @click="gotwo()">上一步</el-button>
            <el-button type="primary" @click="addmerchant()">提交</el-button>
        </div>
    </div>
    </div>
  </div>
</template>

<script>
import {
    getservice,
    getBD,
    wx1,
    wx2,
    wx3,
    province,
    city,
    county,
    parentlist,
    banklist,
    ratelist,
    merchantsave
} from "@/api/api";
export default {
  name: "baseform",
  data: function() {
    return {
    token: { token: sessionStorage.getItem("token") },
    ones: true,
    twos: false,
    threes: false,
    geti:false,
    loading:'',
    ratelists:[],
    servicearr1:[],
    servicearr2:[],
    BDarr:[],
    wx1arr: [],
    wx1code: "",
    cityId:"",
    wx2arr: [],
    wx3arr:[],
    provincearr:[],
    upload:  this.$store.state.urlexcel +"/product/v31/api/merchant/uploadfile/upload",
    cityarr:[],
    citysarr:[],
    countyarr:[],
    bankarr:[],
    userinfo:{},
    parentlists:[],
    ruleForm: {
        agent1Id: '', // 一级服务商
        agent2Id: '', //二级服务商
        bdId: '', // DB
        merchant_name: '',//商户名称
        instNo:'60000001',
        agent2:'',
        BDname:'',
        industry3:'',
        county:''
    },
    settlement:{
        licenceType:'',
        photoType: '1',
        accountBankName:'',
        city:'',
        province:''
    },
    settlement1:{
        accountBankName:'',
        licenceType:'',
        photoType: '1',
        accountBankName:'',
        city:'',
        province:''
    },
    picture:{
        pBankcardA:'',
        pBankcardB:'',
        pIdcardA:'',
        pIdcardB:'',
        pOutside:'',
        pInside:'',
        pIdcardHander:'',
        pBankIdcardA:'',
        pBankIdcardB:'',
        pOther:'',
        pLicense:'',
        pOpenAccount:'',
        pUnincorporated:'',
        pOrganization:'',
        pTaxRegistration:'',
        rateCode:''
    },
    
    rules: {
        agent1Id: [{required: true, message: '请选择一级服务商'}],
        agent2Id: [{required: true, message: '请选择二级服务商'}],
        bdId: [{required: true, message: '请选择业态'}],
        merchantName: [{required: true, message: '请输入商户名称', trigger: 'blur'}],
        merchantShortName:[{required: true, message: '请输入商户简称', trigger: 'blur'}],
        merchantBusinessName:[{required: true, message: '请输入注册名称', trigger: 'blur'}],
        contactName:[{required: true, message: '请输入商户联系人', trigger: 'blur'}],
        contactPhone:[{pattern: /^1[3456789]\d{9}$/,required: true, message: '请输入正确电话', trigger: 'blur'}],
        contactEmail:[{type: 'email', required: true, message: '请输入正确邮箱', trigger: 'blur'}],
        merchantMcc1Name:[{required: true, message: '请选择所属行业', trigger: 'blur'}],
        merchantMccName:[{required: true, message: '请选择二级所属行业', trigger: 'blur'}],
        industry3:[{required: true, message: '请选择三级所属行业', trigger: 'blur'}],
        servicePhone:[{pattern: /^1[3456789]\d{9}$/,required: true, message: '请输入正确电话', trigger: 'blur'}],
        province:[{required: true, message: '请选择省', trigger: 'blur'}],
        city:[{required: true, message: '请选择市', trigger: 'blur'}],
        county:[{required: true, message: '请选择区', trigger: 'blur'}],
        merchantAddress:[{required: true, message: '请输入详细地址', trigger: 'blur'}],
    },
    // 企业
    settlements:{
        merchant_type: [{required: true, message: '请选择商户类型', trigger: 'blur'}],
        businessLicence: [{required: true, message: '营业执照号', trigger: 'blur'}],
        businessLicenceExpire:[{required: true, message: '营业有效期', trigger: 'blur'}],
        accountType:[{required: true, message: '结算账户类型', trigger: 'blur'}],
        principalCertNo:[{required: true, message: '请输入结算人证件号码', trigger: 'blur'}],
        principalCertExpire:[{required: true, message: '请输入结算人证件有效期', trigger: 'blur'}],
        accountCardName:[{required: true, message: '请输入结算账户开户名', trigger: 'blur'}],
        accountCardNum:[{required: true, message: '请输入结算账户开户号', trigger: 'blur'}],
        accountPhone:[{required: true, message: '请输入银行预留手机号', trigger: 'blur'}],
        sheng:[{required: true, message: '请选择开户行', trigger: 'blur'}],
        province:[{required: true, message: '请选择所在省', trigger: 'blur'}],
        city:[{required: true, message: '请选择所在市', trigger: 'blur'}],
        accountBankName:[{required: true, message: '请选择结算户开户支行'}],
    },
    // 小微企业
    settlements1:{
        principalCertNo:[{required: true, message: '请输入结算人证件号码', trigger: 'blur'}],
        principalCertExpire:[{required: true, message: '请输入结算人证件有效期', trigger: 'blur'}],
        accountCardName:[{required: true, message: '请输入结算账户开户名', trigger: 'blur'}],
        accountCardNum:[{required: true, message: '请输入结算账户开户号', trigger: 'blur'}],
        accountPhone:[{required: true, message: '请输入银行预留手机号', trigger: 'blur'}],
        sheng:[{required: true, message: '请选择开户行', trigger: 'blur'}],
        province:[{required: true, message: '请选择所在省', trigger: 'blur'}],
        city:[{required: true, message: '请选择所在市', trigger: 'blur'}],
        accountBankName:[{required: true, message: '请选择结算户开户支行'}],
    },
    pictures:{

    }
      
    };
  },
  created(){
    this.userinfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.getservice()
    this.wx1();
    this.province();
    this.parentlist();
    if(this.userinfo.rolesId == 2){
        this.serviceid(this.userinfo.fid)
    }else if(this.userinfo.rolesId == 3){
        this.ruleForm.agent2Id = this.userinfo.fid
        this.getBD(this.userinfo.fid)
    }else if(this.userinfo.rolesId == 4){
        this.ruleForm.bdId = this.userinfo.fid
    }
  },
  methods: {
    oneBtn() {
      this.ones = false;
      this.twos = true;
    },
    two(formName) {
           this.$refs[formName].validate((valid) => {
              if (valid) {
                this.twos = false;
                this.threes = true;
              } else {
                console.log('请完善结算信息');
                return false;
              }
            });
        // this.twos = false;
        // this.threes = true;
        // var newobj = Object.assign(this.ruleForm, this.settlement1);
        // console.log(newobj)

        // 获取费率
        ratelist({
            bdId: this.ruleForm.bdId
        }).then(res => {
            // console.log(res);
            if (res.code == 405) {
            sessionStorage.removeItem("token");
            this.$router.push("/login");
            } else {
            this.ratelists = res.data;
            }
        });
    },
    gotwo() {
      this.threes = false;
      this.twos = true;
    },
    goone() {
      this.twos = false;
      this.ones = true;
    },
    // 基本信息验证
    basic(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.oneBtn()
          } else {
            console.log('请完善基本信息');
            return false;
          }
        });
        this.ruleForm.merchantName = this.ruleForm.merchantName.trim()
        this.ruleForm.merchantShortName = this.ruleForm.merchantShortName.trim()   
        this.ruleForm.merchantBusinessName = this.ruleForm.merchantBusinessName.trim()
        console.log(this.ruleForm)

        // this.oneBtn()
    },
    // 商户类型
    merchantsType(val){
      console.log(val)
      if(val == 3){
        this.geti = false;
        this.settlement.licenceType = ''
        this.settlement1.merchantType = 3
        this.settlement1.accountType = 2
      }else if(val == 1){
          this.geti = false
        //   this.settlement.licenceType = 0
      }else if(val == 2){
           this.geti = true
          this.settlement.licenceType = 1
      }
    },
    // 获取一级服务商
    getservice(){
        getservice({
            type: 1
        }).then(res => {
            console.log(res);
        if(res.code ==405){
            sessionStorage.removeItem("token");
            this.$router.push("/login");
        }else if (res.code == 200) {
            for (var i = 0; i < res.data.rows.length; i++) {
            this.servicearr1.push({
                value: res.data.rows[i].agentname,
                id: res.data.rows[i].id
            });
            }
        }
        });
    },
     // 一级服务商
    querySearch(queryString, cb) {
      let servicearr = this.servicearr1;
      let results = queryString
        ? servicearr.filter(this.createFilter(queryString))
        : servicearr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
     // 二级服务商
    querySearch2(queryString, cb) {
      let servicearr = this.servicearr2;
      let results = queryString
        ? servicearr.filter(this.createFilter(queryString))
        : servicearr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    // 银行支行
     querySearch3(queryString, cb) {
      let servicearr = this.bankarr;
      let results = queryString
        ? servicearr.filter(this.createFilter(queryString))
        : servicearr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    // 根据一级查2级
    serviceid(item){
        this.ruleForm.agent1Id = item.id
        this.servicearr2 =  []
        this.ruleForm.agent2 = '';
        this.ruleForm.BDname = '';
         getservice({
            type: 2,
            parentid:item.id
        }).then(res => {
            console.log(res);
            for (var i = 0; i < res.data.rows.length; i++) {
            this.servicearr2.push({
                value: res.data.rows[i].agentname,
                id: res.data.rows[i].id
            });
            }
        });
        // this.ruleForm.agent1Id = item.id
    },
    // 获取2级
     serviceid2(item){
         this.ruleForm.agent2Id = item.id
          this.ruleForm.BDname = '';
       console.log(item)
        this.getBD(item.id)
    },
     // 区银行支行信息
    serviceid3(item){
        console.log(item)
        // this.settlement.accountBankName = item.bankName
        this.settlement.accountBankNo = item.id
        // this.settlement.accountBankName = item.bankName
        // this.settlement1.accountBankName = item.bankName
        // this.settlement1.accountBankName = item.bankName
        this.settlement1.accountBankNo = item.id
    },
     // 业态
    BDname(queryString, cb) {
      let BDarr = this.BDarr;
      let results = queryString
        ? BDarr.filter(this.createFilter(queryString))
        : BDarr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    // 获取BD
    getBD(id) {
      this.BDarr = [];
      getBD({ agentid: id }).then(res => {
          if(res.code ==405){
            sessionStorage.removeItem("token");
            this.$router.push("/login");
      }else if (res.code == 200) {
        console.log(res);
        for (var i = 0; i < res.data.rows.length; i++) {
          this.BDarr.push({
            value: res.data.rows[i].name,
            id: res.data.rows[i].id
          });
        }
      }
      });
    },
    BDid(item) {
        this.ruleForm.bdId = item.id
        this.picture.rateCode = ''
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !==
          -1
        );
      };
    },
    // 获取一级银行
    parentlist(){
        parentlist().then(res => {
            this.parentlists = res.data;
        });
    },
    parent(val){
         let obj = {};
        obj = this.parentlists.find(item => {
            //这里的userList就是上面遍历的数据源
            return item.id === val; //筛选出匹配数据
        });
        console.log(obj)
        this.settlement.shengNo = obj.parentBankNo
        this.settlement1.accountBankName = ''
        this.settlement.accountBankName = ''
        this.settlement.province = ''
        this.settlement.city = ''
        this.settlement1.province = ''
        this.settlement1.city = ''
        //  banklist({
        //     parentBankNo: this.settlement.shengNo,
        //     cityId:this.cityId
        // }).then(res => {
        //     // this.bankarr = res.data;
        //     this.bankarr = []
        //     for (var i = 0; i < res.data.length; i++) {
        //         this.bankarr.push({
        //             value: res.data[i].bankName,
        //             id: res.data[i].unionBankNo
        //         });
        //         }
        // });
    },
      // 获取行业
    wx1(val) {
      wx1().then(res => {
        this.wx1arr = res.data;
      });
    },
    // 获取行业二级
    wx2fun(val) {
        console.log(val)
        this.ruleForm.merchantMcc1 = val
        this.ruleForm.merchantMcc2Names = ''
        this.ruleForm.industry3 = ''
      this.wx2arr = "";
      wx2({
        wx1Id: val
      }).then(res => {
        // console.log(res);
        this.wx2arr = res.data;
      });
    },
    // 获取行业三级
    wx3fun(val) {
        this.ruleForm.merchantMcc2 = val
      this.wx3arr = "";
      this.ruleForm.industry3 = ''
      wx3({
        wx2Id: val,
        type: 'wx3'
      }).then(res => {
        // console.log(res);
        this.wx3arr = res.data;
      });
    },
    // 选取行业三级
    wx4fun(val){
        let obj = {};
        obj = this.wx3arr.find(item => {
            //这里的userList就是上面遍历的数据源
            return item.id === val; //筛选出匹配数据
        });
        console.log(obj)
        this.ruleForm.merchantMcc1Name = obj.firstname
        this.ruleForm.merchantMcc2Name = obj.secondname
        this.ruleForm.merchantMcc3 = val
        this.ruleForm.merchantMccName = obj.thirdname
        this.ruleForm.merchantMccCode = obj.code
    },
     //获取省
    province() {
      province().then(res => {
        // console.log(res);
        this.provincearr = res.data;
      });
    },
    //获取市
    city(val) {
      let obj = {};
      this.ruleForm.city = ''
      this.ruleForm.county = ''
      obj = this.provincearr.find(item => {
        //这里的userList就是上面遍历的数据源
        return item.id === val; //筛选出匹配数据
      });
      this.ruleForm.merchantProvince = obj.name
      this.ruleForm.provinceCode = obj.code
      this.cityarr = "";
      city({
        provinceId: val
      }).then(res => {
        // console.log(res);
        this.cityarr = res.data;
      });
    },
    //获取银行市code
    citys(val) {
      let obj = {};
      obj = this.provincearr.find(item => {
        //这里的userList就是上面遍历的数据源
        return item.id === val; //筛选出匹配数据
      });
      this.settlement.accountBankProvince = obj.code
      this.settlement1.accountBankProvince = obj.code
      this.citysarr = "";
      this.settlement.accountBankName = ''
      this.settlement.city = ''
      city({
        provinceId: val
      }).then(res => {
        // console.log(res);
        this.citysarr = res.data;
      });
    },
     // 获取银行区code
    countys(val){
        let obj = {};
        obj = this.citysarr.find(item => {
        //这里的userList就是上面遍历的数据源
        return item.id === val; //筛选出匹配数据
        });
        console.log(obj)
        this.settlement.accountBankCity = obj.code
        this.settlement1.accountBankCity = obj.code
        this.settlement.bankid = obj.id
        this.cityId = obj.id
        this.countysarr = "";
        this.settlement1.accountBankName = ''
        this.settlement.accountBankName = ''
      banklist({
        parentBankNo: this.settlement.shengNo,
        cityId:this.settlement.bankid
      }).then(res => {
        // this.bankarr = res.data;
        this.bankarr = []
        for (var i = 0; i < res.data.length; i++) {
            this.bankarr.push({
                value: res.data[i].bankName,
                id: res.data[i].unionBankNo
            });
            }
      });
    },
    // 选择开户支行
    accountBank(val){
         let obj = {};
        obj = this.bankarr.find(item => {
        //这里的userList就是上面遍历的数据源
        return item.unionBankNo === val; //筛选出匹配数据
        });
        // console.log(obj)
        this.settlement.accountBankName = obj.bankName
        this.settlement.accountBankNo = obj.unionBankNo
    },
    // 获取区
    county(val){
        let obj = {};
        this.ruleForm.county = ''
        obj = this.cityarr.find(item => {
        //这里的userList就是上面遍历的数据源
        return item.id === val; //筛选出匹配数据
        });
        this.ruleForm.merchantCity = obj.name
        this.ruleForm.cityCode = obj.code
        this.countyarr = "";
      county({
        cityId: val
      }).then(res => {
        // console.log(res);
        this.countyarr = res.data;
      });
    },
    countyCode(val){
         let obj = {};
        obj = this.countyarr.find(item => {
        //这里的userList就是上面遍历的数据源
        return item.code === val; //筛选出匹配数据
        });
        // console.log(obj)
        this.ruleForm.merchantCounty = obj.name
        this.ruleForm.countyCode = obj.code
    },
    // 上传图片
    pBankcardA(res, file) { //银行卡正面
      if(res.code ==405){
            sessionStorage.removeItem("token");
            this.$router.push("/login");
      }else if (res.code == 200) {
          this.$message({
            message: "上传成功",
            type: "success"
          });
        this.picture.pBankcardA = res.data.filePath;
      }else{
          this.$message.error(res.message);
      }
     
    },
    pBankcardB(res, file) { //银行卡反面
     if(res.code ==405){
            sessionStorage.removeItem("token");
            this.$router.push("/login");
      }else if (res.code == 200) {
          this.$message({
            message: "上传成功",
            type: "success"
          });
        this.picture.pBankcardB = res.data.filePath;
      }else{
          this.$message.error(res.message);
      }
    },
    pIdcardA(res, file){ //身份证正面
        if(res.code ==405){
            sessionStorage.removeItem("token");
            this.$router.push("/login");
      }else if (res.code == 200) {
          this.$message({
            message: "上传成功",
            type: "success"
          });
        this.picture.pIdcardA = res.data.filePath;
      }else{
          this.$message.error(res.message);
      }
    },
    pIdcardB(res, file){ //身份证正面
        if(res.code ==405){
            sessionStorage.removeItem("token");
            this.$router.push("/login");
      }else if (res.code == 200) {
          this.$message({
            message: "上传成功",
            type: "success"
          });
        this.picture.pIdcardB = res.data.filePath;
      }else{
          this.$message.error(res.message);
      }
    },
    pOutside(res, file){ // 外部门头照
        if(res.code ==405){
            sessionStorage.removeItem("token");
            this.$router.push("/login");
      }else if (res.code == 200) {
          this.$message({
            message: "上传成功",
            type: "success"
          });
        this.picture.pOutside = res.data.filePath;
      }else{
          this.$message.error(res.message);
      }
    },
    pInside(res, file){ // 内部环境照
        if(res.code ==405){
            sessionStorage.removeItem("token");
            this.$router.push("/login");
      }else if (res.code == 200) {
          this.$message({
            message: "上传成功",
            type: "success"
          });
        this.picture.pInside = res.data.filePath;
      }else{
          this.$message.error(res.message);
      }
    },
    pIdcardHander(res, file){ // 手持身份证照
        if(res.code ==405){
            sessionStorage.removeItem("token");
            this.$router.push("/login");
      }else if (res.code == 200) {
          this.$message({
            message: "上传成功",
            type: "success"
          });
        this.picture.pIdcardHander = res.data.filePath;
      }else{
          this.$message.error(res.message);
      }
    },
    pBankIdcardA(res, file){ // 对私结算人身份证正面照
        if(res.code ==405){
            sessionStorage.removeItem("token");
            this.$router.push("/login");
      }else if (res.code == 200) {
          this.$message({
            message: "上传成功",
            type: "success"
          });
        this.picture.pBankIdcardA = res.data.filePath;
      }else{
          this.$message.error(res.message);
      }
    },
     pBankIdcardB(res, file){ // 对私结算人身份证反面照
        if(res.code ==405){
            sessionStorage.removeItem("token");
            this.$router.push("/login");
      }else if (res.code == 200) {
          this.$message({
            message: "上传成功",
            type: "success"
          });
        this.picture.pBankIdcardB = res.data.filePath;
      }else{
          this.$message.error(res.message);
      }
    },
     pOther(res, file){ // 其他照片
        if(res.code ==405){
            sessionStorage.removeItem("token");
            this.$router.push("/login");
      }else if (res.code == 200) {
          this.$message({
            message: "上传成功",
            type: "success"
          });
        this.picture.pOther = res.data.filePath;
      }else{
          this.$message.error(res.message);
      }
    },
     pLicense(res, file){ // 营业执照
        if(res.code ==405){
            sessionStorage.removeItem("token");
            this.$router.push("/login");
      }else if (res.code == 200) {
          this.$message({
            message: "上传成功",
            type: "success"
          });
        this.picture.pLicense = res.data.filePath;
         
        
      }else{
          this.$message.error(res.message);
      }
    },
     pOpenAccount(res, file){ // 开户许可证照片
        if(res.code ==405){
            sessionStorage.removeItem("token");
            this.$router.push("/login");
      }else if (res.code == 200) {
          this.$message({
            message: "上传成功",
            type: "success"
          });
        this.picture.pOpenAccount = res.data.filePath;
      }else{
          this.$message.error(res.message);
      }
    },
     pUnincorporated(res, file){ // 入账非法人证明
        if(res.code ==405){
            sessionStorage.removeItem("token");
            this.$router.push("/login");
      }else if (res.code == 200) {
          this.$message({
            message: "上传成功",
            type: "success"
          });
        this.picture.pUnincorporated = res.data.filePath;
      }else{
          this.$message.error(res.message);
      }
    },
    pOrganization(res, file){ // 组织机构代码
        if(res.code ==405){
            sessionStorage.removeItem("token");
            this.$router.push("/login");
      }else if (res.code == 200) {
          this.$message({
            message: "上传成功",
            type: "success"
          });
        this.picture.pOrganization = res.data.filePath;
      }else{
          this.$message.error(res.message);
      }
    },
    pTaxRegistration(res, file){ // 税务登记照
        if(res.code ==405){
            sessionStorage.removeItem("token");
            this.$router.push("/login");
      }else if (res.code == 200) {
          this.$message({
            message: "上传成功",
            type: "success"
          });
        this.picture.pTaxRegistration = res.data.filePath;
      }else{
          this.$message.error(res.message);
      }
    },
    licenceType(val){
        this.settlement.photoType = val
    },
    
    // 新增商户
    merchantsave(merchaninfo){
        var that = this
         merchantsave(merchaninfo).then(res => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if(res.code == 200) {
            this.$message({
                message: "新增商户成功",
                type: "success"
            });
            this.ruleForm =  {
                    agent1Id: '', // 一级服务商
                    agent2Id: '', //二级服务商
                    bdId: '', // DB
                    merchant_name: '',//商户名称
                    instNo:'60000001'
                }
            this.settlement = {
                                licenceType:'',
                                photoType: '1'
                            },
            this.picture = {
                            pBankcardA:'',
                            pBankcardB:'',
                            pIdcardA:'',
                            pIdcardB:'',
                            pOutside:'',
                            pInside:'',
                            pIdcardHander:'',
                            pBankIdcardA:'',
                            pBankIdcardB:'',
                            pOther:'',
                            pLicense:'',
                            pOpenAccount:'',
                            pUnincorporated:'',
                            pOrganization:'',
                            pTaxRegistration:''
                        },
            this.settlement1 ={}
            this.$router.push({
                    path: "/mymerchants",
                });
            setTimeout(function(){that.$router.go(0)},200)
        }else{
            this.$message.error(res.message);
        }
      });
    },
    // 确定新增商户
    addmerchant(){
        let allinfo;
        if(this.settlement.merchantType == 1 || this.settlement.merchantType ==2){
           allinfo = Object.assign(this.ruleForm,this.settlement,this.picture)  //企业
        }else if(this.settlement.merchantType == 3){
            allinfo = Object.assign(this.ruleForm,this.settlement1,this.picture)  //小微
        }
        console.log(allinfo)
        this.merchantsave(allinfo)
    }
  }
};
</script>


<style scoped lang="less">
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.Box {
  width: 100%;
  background: #fff;
  padding: 10px;
}
.basicBox{
    width: 70%;
    text-align: center;
    margin: 0 auto;
}
.basicBoxs{
     width: 75%;
    text-align: center;
    margin: 0 auto;
}
.width100{
    width: 100%;
}
.block{
    text-align: left;
}

.photo{
    width: 25%;
    display: inline-block;
}
.btnBox{
    width: 100%;
    text-align: center;
}
.service{
    width: 100%;
}
</style>
